<template>
  <h1>computed计算</h1>
  <h2>今年年龄：{{ age }}</h2>
  <h2>十年后年龄：{{ newAge }}</h2>
</template>

<script>
  import { computed, ref } from "vue";
  export default {
    name: "App",
    // 组合式 API 写法 (Vue3推荐)
    setup() {
      // 今年年龄：
      const age = ref(19);
      // 十年后年龄：💥 computed 函数需要从 vue 中导入
      const newAge = computed(() => age.value + 10);

      console.log(age);
      console.log(newAge);

      // 返回给模板使用
      return { age, newAge };
    },
    // 选项式 API 写法 (回顾了解)
    // data() {
    //   return {
    //     age: 18,
    //   };
    // },
    // computed: {
    //   newAge() {
    //     return this.age + 10;
    //   },
    // },
  };
</script>
